<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单验证</title>
		<!--基础文件-->
		<link rel="stylesheet" type="text/css" href="css/base.css"/>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<!--关于表单验证的样式文件-->
		<link rel="stylesheet" type="text/css" href="plugins/formValidator/style/formvalidator.css" />
	</head>
	<body>
		<div id="StyleBox" class="scrollBar">
			<!--表单验证部分-->
			<div class="ml50">
				<!--标题-->
				<h2 class="titleOne mt30 mb20 ml100 pl10 f_blue f20">表单验证FormValidator</h2>
				<!--邮箱验证-->
				<div class="mt5 clearfix">
					<span class="fl pr5 tagName"><span class="f_red mr5 fb">*</span>邮箱:</span>
					<div class="fl">
						<input type="text" id="email" class="txtInput" placeholder="请输入邮箱" />
						<p id="emailTip"></p>
					</div>
				</div>
				<!--手机验证-->
				<div class="mt5 clearfix">
					<span class="fl pr5 tagName"><span class="f_red mr5 fb">*</span>手机:</span>
					<div class="fl">
						<input type="text" id="phone" class="txtInput" placeholder="请输入手机号"  />
						<p id="phoneTip"></p>
					</div>
				</div>
				<!--密码验证-->
				<div class="mt5 clearfix">
					<span class="fl pr5 tagName"><span class="f_red mr5 fb">*</span>密码:</span>
					<div class="fl">
						<input type="text" id="passward" class="txtInput" placeholder="请输入密码" onblur="passwardTwo.focus()"  /><br />
						<p id="passwardTip"></p>
					</div>
				</div>
				<!--再次验证密码-->
				<div class="mt5 clearfix">
					<span class="fl pr5 tagName"><span class="f_red mr5 fb">*</span>再次输入密码:</span>
					<div class="fl">
						<input type="text" id="passwardTwo" class="txtInput" placeholder="请再次输入密码"  /><br />
						<p id="passwardTwoTip"></p>
					</div>
				</div>
				<!--身份证号验证-->
				<div class="mt5 clearfix">
					<span class="fl pr5 tagName"><span class="f_red mr5 fb">*</span>身份证:</span>
					<div class="fl">
						<input type="text" id="personId" class="txtInput" placeholder="请输入身份证号码" /><br />
						<p id="personIdTip"></p>
					</div>
				</div>
				<!--用户名验证-->
				<div class="mt5 clearfix">
					<span class="fl pr5 tagName"><span class="f_red mr5 fb">*</span>用户名:</span>
					<div class="fl">
						<input type="text" id="name" class="txtInput" placeholder="请输入用户名"  /><br />
						<p id="nameTip"></p>
					</div>
				</div>
				<!--多选框 start-->
				<div class="mt5 clearfix">
					<span class="fl tagName lineheightNone"><span class="f_red mr5 fb">*</span>多选按钮：</span>
					<div class="fl">
						<ul class="clearfix ml5" style="width: 600px;">
							<li class="fl mr15 mb5 clearfix">
								<input type="checkbox" name="ckb" id="checkbox01" value="" class="fl" />
								<label for="checkbox01" class="cp fl">刘圣楠</label>
							</li>
							<li class="fl mr15 mb5 clearfix">
								<input type="checkbox" name="ckb" id="checkbox02" value="" class="fl" />
								<label for="checkbox02" class="cp fl">高福娜</label>
							</li>
							<li class="fl mr15 mb5 clearfix">
								<input type="checkbox" name="ckb" id="checkbox03" value="" class="fl" />
								<label for="checkbox03" class="cp fl">潘子童</label>
							</li>
							<li class="fl mr15 mb5 clearfix">
								<input type="checkbox" name="ckb" id="checkbox04" value="" class="fl" />
								<label for="checkbox04" class="cp fl">孙鹏程</label>
							</li>
							<li class="fl mr15 mb5 clearfix">
								<input type="checkbox" name="ckb" id="checkbox05" value="" class="fl" />
								<label for="checkbox05" class="cp fl">王瑞琪</label>
							</li>
							<li class="fl mr15 mb5 clearfix">
								<input type="checkbox" name="ckb" id="checkbox06" value="" class="fl" />
								<label for="checkbox06" class="cp fl">其他</label>
							</li>
							<li class="fl mr15 mb5 clearfix">
								<input type="checkbox" name="ckb" id="checkbox07" value="" class="fl" />
								<label for="checkbox07" class="cp fl">刘圣楠</label>
							</li>
							<li class="fl mr15 mb5 clearfix">
								<input type="checkbox" name="ckb" id="checkbox08" value="" class="fl" />
								<label for="checkbox08" class="cp fl">高福娜</label>
							</li>
							<li class="fl mr15 mb5 clearfix">
								<input type="checkbox" name="ckb" id="checkbox09" value="" class="fl" />
								<label for="checkbox09" class="cp fl">潘子童</label>
							</li>
							<li class="fl mr15 mb5 clearfix">
								<input type="checkbox" name="ckb" id="checkbox10" value="" class="fl" />
								<label for="checkbox10" class="cp fl">孙鹏程</label>
							</li>
							<li class="fl mr15 mb5 clearfix">
								<input type="checkbox" name="ckb" id="checkbox11" value="" class="fl" />
								<label for="checkbox11" class="cp fl">王瑞琪</label>
							</li>
							<li class="fl mr15 mb5 clearfix">
								<input type="checkbox" name="ckb" id="checkbox12" value="" class="fl" />
								<label for="checkbox12" class="cp fl">其他</label>
							</li>
						</ul>
						<p id="ckbTip"></p>
					</div>
				</div>
				<!--多选框 end-->
				<!--单选按钮 start-->
				<div class="mt5 clearfix">
					<span class="fl tagName lineheightNone"><span class="f_red mr5 fb">*</span>单选按钮：</span>
					<div class="fl">
						<ul class="clearfix ml5" style="width: 600px;">
							<li class="fl mr15 mb5 clearfix">
								<input type="radio" name="radio" id="radio01" value="" class="fl" />
								<label for="radio01" class="cp fl">刘圣楠</label>
							</li>
							<li class="fl mr15 mb5 clearfix">
								<input type="radio" name="radio" id="radio02" value="" class="fl" />
								<label for="radio02" class="cp fl">高福娜</label>
							</li>
							<li class="fl mr15 mb5 clearfix">
								<input type="radio" name="radio" id="radio03" value="" class="fl" />
								<label for="radio03" class="cp fl">潘子童</label>
							</li>
							<li class="fl mr15 mb5 clearfix">
								<input type="radio" name="radio" id="radio04" value="" class="fl" />
								<label for="radio04" class="cp fl">孙鹏程</label>
							</li>
							<li class="fl mr15 mb5 clearfix">
								<input type="radio" name="radio" id="radio05" value="" class="fl" />
								<label for="radio05" class="cp fl">王瑞琪</label>
							</li>
							<li class="fl mr15 mb5 clearfix">
								<input type="radio" name="radio" id="radio06" value="" class="fl" />
								<label for="radio06" class="cp fl">其他</label>
							</li>
						</ul>
						<p id="radioTip"></p>
					</div>
				</div>
				<!--单选按钮 end-->
				<!--下拉菜单 start-->
				<div class="mt5 clearfix">
					<span class="fl tagName"><span class="f_red mr5 fb">*</span>下拉菜单：</span>
					<div class="fl">
						<select id="select"class="selectOption block">
							<option value="">请选择一项</option>
							<option value="">产品组</option>
							<option value="">美工组</option>
							<option value="">前端组</option>
							<option value="">安卓IOS</option>
							<option value="">网站后台</option>
						</select>
						<p id="selectTip"></p>
					</div>
				</div>
				<!--下拉菜单 end-->
				<!--文本域 start-->
				<div class="mt5 clearfix">
					<span class="fl tagName lineheightNone"><span class="f_red mr5 fb">*</span>文本域：</span>
					<div class="fl">
						<textarea name="" rows="" cols="" id="textarea" class="textarea"></textarea>
						<p id="textareaTip"></p>
					</div>
				</div>
				<!--文本域 end-->
			</div>	
		    
		</div>
		
		<!--基础文件-->
		<script type="text/javascript" src="js/common/jquery.min.js"></script>
		<!--表单验证插件-->
		<script type="text/javascript" src="plugins/formValidator/formValidatorRegex.js"></script>
		<script type="text/javascript" src="plugins/formValidator/formValidator.js"></script>
		<!--本页面js-->
		<script type="text/javascript" src="js/FormAndValidator.js"></script>
	</body>

</html>